<template>
    <div class="container">
        <div class="head">
            <div class="title">
                <h1>今日头条</h1>
            </div>

            <div class="message">
                <i class="el-icon-message-solid"></i>
                <span>消息</span>
            </div>

            <div class="avatar" @click="goback()">
                <i>
                    <el-avatar :src="$store.state.touxiang"></el-avatar>
                </i>
                <i>{{ this.$store.state.publishename }}</i>
            </div>

        </div>

        <div class="middle">
            <div class="side1"></div>
            <div class="center">
                <div class="m1">
                    <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption"
                                  class="my-quill-editor"></quill-editor>
                </div>
                <div class="m2">

                    <el-form ref="form" :model="form" label-width="150px">
                        <el-form-item label="新闻类别">
                            <el-select v-model="form.category" placeholder="请选择新闻类别">
                                <el-option label="关注" value="关注"></el-option>
                                <el-option label="推荐" value="推荐"></el-option>
                                <el-option label="财经" value="财经"></el-option>
                                <el-option label="体育" value="体育"></el-option>
                                <el-option label="国际" value="国际"></el-option>
                                <el-option label="科技" value="科技"></el-option>
                                <el-option label="娱乐" value="娱乐"></el-option>
                                <el-option label="更多" value="更多"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="新闻标题">
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>

                        <el-form-item label="上传封面">
                            <el-upload v-model="form.coverImageUrl"
                                       action="#"
                                       list-type="picture-card"
                                       :auto-upload="false">
                                <i slot="default" class="el-icon-plus"></i>
                                <div slot="file" slot-scope="{file}">
                                    <img
                                            class="el-upload-list__item-thumbnail"
                                            :src="file.url" alt=""
                                    >
                                    <span class="el-upload-list__item-actions">
                                    <span
                                            class="el-upload-list__item-preview"
                                            @click="handlePictureCardPreview(file)"
                                    >
                                    <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span
                                            v-if="!disabled"
                                            class="el-upload-list__item-delete"
                                            @click="handleDownload(file)"
                                    >
                                    <i class="el-icon-download"></i>
                                    </span>
                                    <span
                                            v-if="!disabled"
                                            class="el-upload-list__item-delete"
                                            @click="handleRemove(file)"
                                    >
                                    <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                                </div>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>

                        <el-form-item label="推荐给可能认识的人">
                            <el-switch v-model="form.maybe"></el-switch>
                        </el-form-item>

                    </el-form>
                </div>
            </div>

            <div class="side2"></div>
        </div>

        <div class="foot">
            <div class="option">
                <el-button type="primary" @click="onSubmit,previewContent">预览</el-button>
                <el-button type="primary" plain @click="saveDraft">存为草稿</el-button>
                <el-button type="primary" plain @click="publish">发布</el-button>

            </div>
        </div>

    </div>
</template>

<style>

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* align-items: center; */
    align-items: flex-start; /* 将 align-items 设为 flex-start */
    height: 1200px; /* 父盒子的高度 */
}

.head {
    height: 100px;
    width: 100%;
    display: flex;
    background-color: cornflowerblue;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    margin: 10px;
}

.head .title {
    width: 150px;
    height: 100px;
    /* background-color: peru; */
    display: flex;
    align-items: center;
    margin-right: auto;
}

.head .message {
    width: 100px;
    height: 100px;
    /* background-color: yellow; */
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 20px;
}

.head .avatar {
    width: 150px;
    height: 100px;
    /* background-color: green; */
    display: flex;
    align-items: center;

}


.item {
    margin-top: 10px;
    margin-right: 40px;
}

.middle {
    height: 1000px;
    width: 100%;
    display: flex;
    /* background-color: cadetblue; */
    position: relative;
    margin: auto;
    margin: 0; /* 将 margin-top 设为 0 */
    margin-bottom: 150px;
}

.middle .side1 {
    width: 15%;
    height: 100%;
    /* background-color: red; */
}

.middle .side2 {
    width: 15%;
    height: 100%;
    /* background-color: red; */
}

.middle .center {
    width: 70%;
    height: 100%;
    /* background-color: yellow; */

}

.middle .center .m1 {
    width: 100%;
    height: 60%;
    background-color: rgb(250, 247, 248);
    /* background-color: purple; */
}

.middle .center .m2 {
    width: 100%;
    height: 50%;
    background-color: rgb(250, 247, 248);
}

.foot {
    height: 100px;
    width: 100%;
    display: flex;
    background-color: cornflowerblue;
    align-items: center;
    justify-content: center; /* 将 justify-content 设为 center */
    padding: 0 30px; /* 将 padding 设为 0 30px */
    margin-top: auto;
    position: fixed;
    bottom: 0;
}

.foot .option {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
    max-width: 70%;
}

</style>

<script>

import axios from 'axios';

export default {
    data() {
        return {
            avtar:this.$store.state.touxiang,
            form: {
                category: '',
                maybe: false,
            },

            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,

            title: '输入标题',
            content: '',
            editorOption: {
                // 占位配置
                placeholder: '请输入...',
                height: '300px',
                modules: {
                    // 配置工具栏
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                        ['blockquote', 'code-block'], // 引用  代码块
                        [{header: 1}, {header: 2}], // 1、2 级标题
                        [{list: 'ordered'}, {list: 'bullet'}], // 有序、无序列表
                        [{script: 'sub'}, {script: 'super'}], // 上标/下标
                        [{indent: '-1'}, {indent: '+1'}], // 缩进
                        [{direction: 'rtl'}], // 文本方向
                        // [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
                        [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题
                        [{color: []}, {background: []}], // 字体颜色、字体背景颜色
                        // [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
                        [{align: []}], // 添加居中按钮
                        ['clean'], // 清除文本格式
                        ['link', 'image', 'video'], // 链接、图片、视频
                        // [{ color: [] }], // 文字颜色按钮
                    ],
                    // 更改插入的图片大小
                    imageResize: {
                        displayStyles: {
                            backgroundColor: "black",
                            border: "none",
                            color: "white",
                        },
                        modules: ["Resize", "DisplaySize", "Toolbar"],
                    },
                }
            },
        }
    },

    created() {

    },
    methods: {
        goback(){
            this.$router.push('/publisher/index');
        },
        onSubmit() {
            console.log('submit!');
        },
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },

        saveDraft() {
            // 构建要发送的新闻数据
            const news = {
                // newId:90,
                newContent: this.content,
                newTitle: this.form.title, // 新闻标题
                newColumn: this.form.category, // 新闻类别
                pictureId: 2,// 上传封面的URL
                newState: 0,
            };
            // 发送发布请求
            //  const news = {}; // 这里是您要发送的新闻数据
            const publisherId = 3; // 这里是发布者的ID
            axios.post(`/api/news/addNewsDraft?publisherId=${publisherId}`, news)
                .then(response => {
                    // 请求成功的处理逻辑
                    console.log(response.data);
                })

                .catch(error => {
                    // 请求失败的处理逻辑
                    console.error(error);
                });
        },
        publish() {
            // 发送发布请求
            //   const news = {}; // 这里是您要发送的新闻数据
            const news = {
                // newId:70,
                newContent: this.content,
                newTitle: this.form.title, // 新闻标题
                newColumn: this.form.category, // 新闻类别
                // : this.form.coverImageUrl,
                pictureId: '',// 上传封面的URL
            };
            const publisherId = this.$store.state.publisherid; // 这里是发布者的ID
            axios.post(`/api/news/uploadNews?publisherId=${publisherId}`, news)
                .then(response => {
                    // 请求成功的处理逻辑
                    console.log(response.data);
                })
                .catch(error => {
                    // 请求失败的处理逻辑
                    console.error(error);
                });
        }
    }
}
</script>